<template>
    <div>
<h1>卡券页面</h1>
<a href="https://localhost:7155/api/Coupon/ExPortExcel">导出所有卡券信息</a>
<hr>
<select v-model="dataps.shopSortId">
    <option value="0">选择门店</option>
    <option v-for="d in ShopSortdata" :value="d.id">{{d.name}}</option>
</select>
<input type="text" placeholder="卡券名称" v-model="dataps.title">
<select v-model="dataps.couponTypeId">
    <option value="0">选择卡券类型</option>
    <option v-for="d in CouponTypeData" :value="d.id">{{d.name}}</option>
</select>
<select v-model="dataps.couponStartId">
    <option value="0">选择状态</option>
    <option v-for="d in CouponStartData" :value="d.id">{{d.name}}</option>
</select>
<select v-model="dataps.isOpen">
    <option :value="null">选择启用或禁用</option>
    <option :value="true">启用</option>
    <option :value="false">禁用</option>
</select>
<input type="button" value="查询" class="btn btn-success" @click="querydata">  <a href="/couponadd" class="btn btn-success">新增卡券</a>

<input type="button" value="重置条件" @click="clearquery">
<hr>

<table class="table">
   <thead>
    <tr>
        <td>
            <input v-model="isselectid" type="checkbox"  @change="selectidarray">
        </td>
        <td>sortName</td>
        <td>name</td>
        <td>img</td>
        <td>typeName</td>
        <td>days</td>
        <td>detail</td>
        <td>price</td>
        <td>sort</td>
        <td>couponStarName</td>
        <td>IsOpen</td>
        <td>操作</td>
    </tr>
   </thead>
   <tbody>
    <tr v-for="d in data">
        <td>
            <input v-model="idarray" type="checkbox" :value="d.id" >
        </td>
        <td>{{d.sortName}}</td>
        <td>
            {{d.name.substring(0,4)}}****{{d.name.substring(7,11)}}</td>
        <td>
            <img style="height: 60px;width: 60px;" :src="'https://localhost:7155/'+d.img" alt="">
           </td>
        <td>{{d.typeName}}</td>
        <td>{{d.days}}</td>
        <td>{{d.detail}}</td>
        <td>{{d.price}}</td>
        <td>{{d.sort}}</td>
        
        <td >
            <span :style="d.couponStarName=='上架'?'color: green;':'color: red;'">  {{d.couponStarName}}</span>
        </td>
      <!--   <td>
           <span v-if="d.couponStarName=='上架'" style="color: red;" > {{d.couponStarName}} </span>
           <span v-else style="color: green;" > {{d.couponStarName}} </span>
        </td> -->

        <td>{{d.isOpen}}</td>
        <td>
            <input type="button" value="编辑" @click="showedit(d.id)">
            <input type="button" value="逻辑删除">

            <input type="button" :value="d.couponStarName=='上架'?'下架':'上架'" @click="">

        </td>
    </tr>
   </tbody>
</table>

<hr>
一共{{pageinfo.count}}条，每页显{{dataps.size}}条，一共{{pageinfo.pagecount}}页，当前第{{dataps.index}}页
<input type="button" @click="setpage(1)" value="首页">
<input type="button" @click="setpage(2)" value="上一页">

<input v-for="d in pageinfo.pagecount" type="button" :value="d" @click="setindex(d)">

<input type="button" @click="setpage(3)" value="下一页">
<input type="button" @click="setpage(4)" value="尾页">

<select v-model="dataps.size"  @change="setpagesize">
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="10">10</option>
</select>

<input type="number" v-model="dataps.index">
<input type="button" value="跳页" @click="setpageindex">
<hr>
<input type="button" value="批量下架" @click="logiceRangeDelete">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()


//重置查询条件
const clearquery=()=>{
    //把查询条件恢复成默认值
        dataps.value.shopSortId=0//门店id
         dataps.value.title=''//卡券名称
         dataps.value.couponTypeId=0//类型id
         dataps.value.couponStartId=0//状态id
        dataps.value. isOpen=null

        //要不要查数据
        dataps.value.index=1;
        getData();
}

//批量逻辑删除
const logiceRangeDelete=()=>{
    //找到保存了选中项的value的数据
    alert(idarray.value)
    //调用Webapi,把选中的行的编号传递过去
    axios.get("/api/Coupon/UpdateCouponStartId",{params:{idstring:idarray.value.toString()}}).then(res=>{
        if(res.data>0){
            getData(); //成功后页面数据要重新下
        }
    })


}

const showedit=(val:any)=>{
    router.push({path:'/couponedit',query:{id:val}})

    // router.push({path:`/couponedit?id=1`})
}

//全选状态
const isselectid=ref()
//全选
const selectidarray=()=>{
    //知道自己的状态
    if(isselectid.value){
        data.value.forEach(d=>{
            idarray.value.push( d.id)
        })
    }
    else
    {
        idarray.value=[]
    }

    



}

//保存选择的复选框的值
const idarray=ref([])

//查询 
const querydata=()=>{
    getData()
}

const CouponTypeData=ref([])
const getCouponTypeData=()=>{
    axios.get("/api/CouponType/CouponTypes").then(res=>{
        CouponTypeData.value = res.data;
    })
}

const ShopSortdata=ref([])
const getShopSortdata=()=>{
    axios.get("/api/ShopSort/GetShopSorts").then(res=>{
        ShopSortdata.value = res.data;
    })
}

const CouponStartData=ref([])
const getCouponStartData=()=>{
    axios.get("/api/CouponStart/GetCouponStarts").then(res=>{
        CouponStartData.value = res.data;
    })
}
//跳页
const setpageindex=()=>{

    if(dataps.value.index>1 && dataps.value.index <= pageinfo.value.pagecount){
        getData();
    }
    else{
        dataps.value.index=1
        getData();
    }
    
}

//页容量
const setpagesize=()=>{
    dataps.value.index = 1;
    getData();
}

//数字按钮翻页
const setindex=(val:any)=>{
    dataps.value.index = val;
    getData()   
}

//翻页四按钮
const setpage=(val:any)=>{
    if(val==1){
        dataps.value.index = 1;
        getData()   
    }

    if(val==2){
        if( dataps.value.index>1){
            dataps.value.index -= 1;
            getData()   
        }
      
    }

    if(val==3){
        if(dataps.value.index < pageinfo.value.pagecount)
        {
            dataps.value.index += 1;
            getData()   
    } 
    }

    if(val==4){
        dataps.value.index = pageinfo.value.pagecount;
        getData()   
    }
}


const data=ref([ {
      "isOpen": true,
      "id": 2,
      "name": "",
      "shopSortId": 1,
      "days": "周一,周二",
      "detail": "3个月",
      "price": 300,
      "sort": 12,
      "img": "/pic/1.jpg",
      "couponStartId": 1,
      "couponTypeId": 1,
      "typeName": "现金卡",
      "sortName": "昌平店",
      "couponStarName": "上架"
    }])

    
    onMounted(()=>{
        getData()

        getShopSortdata()
        getCouponTypeData()
        getCouponStartData()
    })

    const dataps = ref({
        index:1,
        size:2,
        shopSortId:0,//门店id
        title:'',//卡券名称
        couponTypeId:0,//类型id
        couponStartId:0,//状态id
        isOpen:null,
    })
const pageinfo=ref({
    count:0,  //总记录数
    pagecount:0 //总页数
})

    const getData=()=>{
        axios.get("/api/Coupon/GetCouponPageWhere",{params:dataps.value}).then(res=>{
            data.value  = res.data.list

            pageinfo.value.count = res.data.count
            pageinfo.value.pagecount = Math.ceil( pageinfo.value.count / dataps.value.size) 
        })
    }

</script>

<style scoped>

</style>